<script>

    import {overlayVisible} from './store'
    import {fade,} from 'svelte/transition';
</script>

{#if $overlayVisible }
    <div class="wails-reconnect-overlay" transition:fade="{{ duration: 300 }}">
        <div class="wails-reconnect-overlay-content">
            <div class="wails-reconnect-overlay-loadingspinner"></div>
        </div>
    </div>
{/if}

<style>
    .wails-reconnect-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(2px) saturate(0%) contrast(50%) brightness(25%);
        z-index: 999999
    }

    .wails-reconnect-overlay-content {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        background-image: url();
        background-repeat: no-repeat;
        background-position: center
    }

    .wails-reconnect-overlay-loadingspinner {
        pointer-events: none;
        width: 2.5em;
        height: 2.5em;
        border: .4em solid transparent;
        border-color: #f00 #eee0 #f00 #eee0;
        border-radius: 50%;
        animation: loadingspin 1s linear infinite;
        margin: auto;
        padding: 2.5em
    }

    @keyframes loadingspin {
        100% {
            transform: rotate(360deg);
        }
    }

</style>